<template>
  <div class="profile">
    <div class="avatar">
      <van-image
        round
        width="6rem"
        height="6rem" 
        :src="require('../assets/images/user.png')"
      />
      <!-- <van-icon name="user-circle-o" size="80px" color="#1989fa" /> -->
    </div>
    <van-cell-group class="user-group">
      <van-cell 
        icon="phone-circle-o" 
        title="手机号" 
        :value="userInfo && userInfo.phone" 
        is-link 
        @click="showPop = true"
      />
      <van-cell 
        icon="share" 
        title="退出登录" 
        is-link
        @click="logOut"
      />
    </van-cell-group>
    <van-popup 
    v-model="showPop"
    closeable
    round
    close-icon="close"
    :style="{ height: '240px', width: '90%' }"
    @closed="clearPop"
    >
      <div class="changePhone">
        <phone-and-code ref="fields"></phone-and-code>
        <section class="van-section">
          <section class="van-block">
            <van-button 
              size="large" 
              :loading="appLoading"
              loading-text="加载中"
              color="linear-gradient(to right, #4bb0ff, #6149f6)"
              @click="submit"
            >修改手机号</van-button>
          </section>
        </section>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import { Image, Icon, Cell, CellGroup, Popup, Field, Button } from "vant";
  import { default as PhoneAndCode } from '../components/PhoneAndCode';
  import { mapState, mapMutations } from 'vuex';

  export default {
    name: 'profile',
    components: {
      [Image.name]: Image,
      [Icon.name]: Icon,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Popup.name]: Popup,
      [Field.name]: Field,
      [Button.name]: Button,
      PhoneAndCode,
    },
    data () {
      return {
        showPop: false,
      }
    },
    computed: {
      ...mapState ([
        'appLoading' // 将 this.appLoading 映射为 this.$store.state.appLoading
      ]),
			...mapState ('user', [ // 带命名空间的方法
        'userInfo'
      ])
		},
    created () {
    },
    methods: {
      ...mapMutations ([ // 将 this.updateToken(value) 映射为 this.$store.commit('updateToken', value)
        'updateToken'
      ]),
      ...mapMutations ('user', [ // 带命名空间的方法
        'updateUserInfo'
      ]),
      logOut () {
        this.$api.user.loginOut( (res) => {
          this.updateToken('');
          this.updateUserInfo({});
          this.$router.push('/');
        });
      },
      submit () {
        let checkResult = this.$refs.fields.checkSubmit();
        if (checkResult.result){
          this.$api.user.changePhone(checkResult.reqParams, (res) => {
            this.updateUserInfo(
              Object.assign(this.userInfo, {
                phone: checkResult.reqParams.phone
              })
            );
            this.showPop = false;
          })
        }
      },
      clearPop () {
        this.$refs.fields.phone = '';
        this.$refs.fields.smsCode = '';
      }
    }
  }
</script>

<style lang="scss">
  .profile {
    .avatar{
      width: 100%;
      height: 30vw;
      display: block;
      background: #fff url('../assets/images/profileBg6.jpg');
      background-size: 100%;
      text-align: center;
      padding:15vw 0;
    }
    .changePhone{
      padding: 50px 20px 10px;
    }
  }
</style>